<template>
   <!-- 中间板块1 -->
    <div class="center1" style="width: 80%; margin: auto; height: 500px">
      <!-- 中间板块1分类 -->
      <div class="centerClass" style="height: 500px; width: 300px; float: left">
        <ul class="centerClassul">
          <li
            class="centerClassli"
            v-for="fenlei in fenleis"
            :key="fenlei.id"
            @mouseover="itemMouseover"
            @mouseout="itemMouseout"
            @mousemove="itemMousemove($event)"
          >
            <div
              v-for="(leibies, inde) in fenlei.leibie"
              :key="leibies.index"
              style="float: left"
            >
              <span style="padding: 0 2px; font-size: 12px" v-if="inde != 0"
                >/</span
              >
              <!-- 悬浮框 -->
              <div
                id="focus_toolTip"
                class="special_focus_toolTip"
                v-html="toolTopbody"
              >
                <div>22222222222222222</div>
              </div>
              <!--  -->
              <a href=""> {{ leibies }}</a>
            </div>
          </li>
        </ul>
      </div>
      <!-- 悬浮框 -->

      <!-- 中间板块1走马灯 -->
      <div class="block">
        
      </div>
    </div>
</template>

<script>
import $ from "jquery";

export default {
  
 data(){
     return {
        toolTopbody: "",

         // 分类循环li
      fenleis: [
        {
          id: 1,
          leibie: [
            {
              a:"男装",
              b:["男装", "女装", "童装", "内衣"]
            },
             {
              a:"男装",
              b:["男装", "女装", "童装", "内衣"]
            },
             {
              a:"男装",
              b:["男装", "女装", "童装", "内衣"]
            },
          ]
        },
        {
          id: 2,
          leibie: ["电脑"]
        },
        {
          id: 3,
          leibie: ["男装"]
        },
        {
          id: 4,
          leibie: ["女装"]
        },
        {
          id: 5,
          leibie: ["美妆"]
        },
        {
          id: 6,
          leibie: ["医药"]
        },
        {
          id: 7,
          leibie: ["图书"]
        },
        {
          id: 8,
          leibie: ["食品"]
        },
      ],
     }
 },
 methods:{
   itemMouseover: function () {
      var focusTooltip = $("#focus_toolTip");
      focusTooltip.css("display", "block");
    },

    itemMouseout: function () {
      var focusTooltip = $("#focus_toolTip");
      focusTooltip.css("display", "none");
    },

    itemMousemove: function () {
      var self = this;
      
      var effectHtml =
        "<div style='font-size:12px;margin-top:5px;'>" +
          "sddddddddd"   + 
        "</div>";
      self.toolTopbody = effectHtml;
    }

  
 }
}
</script>

<style scoped>

a {
  text-decoration: none;
  font-weight: 300 !important;
  color: rgb(0, 0, 0);
}
a:hover {
  color: red !important;
}
/* 第一板块分类ul */
.centerClassul {
  overflow: hidden;
  padding: 15px 0;
  height: 450px;
  background-color: #884d4d;
  color: #636363;
}
/* 第一板块分类li */
.centerClassli {
  height: 25px;
  font-size: 14px;
  color: #333;
  /* margin-left: 17px; */
  overflow: hidden;
  /* display: list-item; */
  text-align: -webkit-match-parent;
  padding-left: 17px;
}
.centerClassli:hover {
  background-color: #8b8a8a3b;
}

/* 走马灯 */

.block {
  float: left;
  width: 800px;
  margin-left: 10px;
  margin-top: 16px;
  height: 480px;
}

.el-carousel__item:nth-child(n) {
  background-color: #d3dce6;
}

/* 悬浮框 */
.special_focus_toolTip {
  z-index: 7;
  position: absolute;
  display: none;
  width: 800px;
  height: 480px;
  border-style: solid;
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background-color: rgb(60, 223, 133);
  border-width: 1px;
  border-color: #d4cbcba2;
  /* border-radius: 4px; */
  color: black;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 14px;
  /* font-family: 'Microsoft YaHei'; */
  /* line-height: 21px; */
  /* padding: 10px 10px; */
  margin-left: 293px;
  margin-top: -15px;
}
</style>

